<template>
    <div class="common-table">
        <!-- 这个组件实现的是用户表主体 -->
        <el-table :data="tableDate" height="725" stripe>
            <!-- 这里绑定的Data是为了后面的直接使用 -->
          <el-table-column 
          show-overflow-tooltip
          v-for="item in tableLabel"
          :key="item.prop"
          :label="item.label"
          :width="item.width ? item.width : 125"
          >
          <!-- 上面的主要功能是为了实现表头因为没有传入prop所以显示数据 -->
            <template slot-scope="scope"> 
            <!-- 这里使用了命名插槽添加了一个span -->
            <!-- 插槽的有关知识 -->
            <!-- 使用的是elementui的自定义面板 -->
              <span style="margin-left:10px">{{ scope.row[item.prop] }}</span>
             <!-- 使用自定义面板 所以这里使用的是插槽 scope row 好像是组件的特殊用法  因为上面直接绑定了用户数据所以这里可以直接用-->
          </template>
          </el-table-column>
          <el-table-column label="操作" min-width="180">
              <template slot-scope="scope">
                  <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
               <el-button size="mini"  type="danger" @click="handleDelete(scope.row)">删除</el-button>
              </template>
              
          </el-table-column>
        </el-table>

        <el-pagination class="pager" 
        :total="config.total" 
        :current-page.sync="config.page"
        :page-size="20" 
        @current-change="changePage" 
        layout="prev,pager,next"></el-pagination>

    </div>
</template>
<script>
export default{
    name:'CommonTable',
    props:{
        tableDate:Array,
        // 这里就是用户数据
        tableLabel:Array,
        //这里是表头
        config:Object
        //页码组件需要使用的数据
    },
    data(){
        return{}
    },
    methods:{
        handleEdit(row){
            //接收从父组件传过来的方法 使用自定义方法接收
            //编辑用户的逻辑在这里 不过这里就是传话的 只是传数据到父组件 真正的方法在父组件中
            this.$emit('edit',row)
        },
        handleDelete(row){
            //删除用户的逻辑在这里 同上用于传话
            this.$emit('del',row)
        },
        changePage(page){
            // 翻页的逻辑在这里 同上只是为了传话
            this.$emit('changePage',page)
        }
    }
}
</script>
<style lang="less" scoped>
.common-table{
    height: calc(100%-62px);
    background-color: white;
    position: relative;
    .pager{
        position: absolute;
        bottom: 0;
        right: 20px;
    }
}
</style>
